import React, { useState } from "react";
import {
  Select,
  Space,
  Breadcrumb,
  message
} from "antd";
import {
  UserOutlined,
  ReadOutlined,
  FilePdfOutlined,
} from "@ant-design/icons";
import './home.css'
import {
  _getStuNumber,
  _getCNumber,
  _getPNumber,
} from "../../util/api/user/index";
const { Option } = Select;

class AddArticle extends React.Component {
  state = {
    stu_num: 0,
    content_num: 0,
    paper_num: 0,
    isLoading: false,
  };
  componentDidMount = () => {
    this.setState({ isLoading: true });

    _getStuNumber()
      .then((res) => {
        if (res.status === 200 && res.data.code === 0) {
          this.setState({ stu_num: res.data.data[0].count });
        }
      })
      .catch(() => {
        this.setState({ isLoading: false });
        message.error("服务器错误");
      });
    _getCNumber()
      .then((res) => {
        if (res.status === 200 && res.data.code === 0) {
          this.setState({ content_num: res.data.data[0].count });
        }
      })
      .catch(() => {
        this.setState({ isLoading: false });
        message.error("服务器错误");
      });
    _getPNumber()
      .then((res) => {
        if (res.status === 200 && res.data.code === 0) {
          this.setState({ paper_num: res.data.data[0].count, isLoading: false });
        }
      })
      .catch(() => {
        this.setState({ isLoading: false });
        message.error("服务器错误");
      });
  };
  render() {
    return (
      <div>
        <Breadcrumb style={{ margin: "16px 0" }}>
          <Breadcrumb.Item>首页</Breadcrumb.Item>
        </Breadcrumb>
        <div className="admin-body" style={{ padding: 24, minHeight: 360 }}>
          <div className="home-container">
            <div className="home-top-item1">
              <div className="home-num">{this.state.stu_num}</div>
              <div className="home-title">
                <Space>
                  <UserOutlined />
                  学生总数
                </Space>
              </div>
            </div>
            <div className="home-top-item2">
              <div className="home-num">{this.state.content_num}</div>
              <div className="home-title">
                <Space>
                  <ReadOutlined />
                  文章总数
                </Space>
              </div>
            </div>
            <div className="home-top-item3">
              <div className="home-num">{this.state.paper_num}</div>
              <div className="home-title">
                <Space>
                  <FilePdfOutlined />
                  论文总数
                </Space>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default AddArticle;
